<template>
  <div class="box">
      <header class="header">
        <div class="headbox">
          <input class="ipt" type="text" placeholder="大家都在搜:JNC保健品大促" />
          <div class="iconfont icon-02"></div>
        </div>
      </header>
      <div class="content">
        <!-- 轮播图  开始-->
        <div class="banner">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for = "(item, index) of bannerlist" :key ="index">
              <img :src="item" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <!-- 轮播图  结束-->
        <!-- 商品分类开始 -->
        <div class="pro-type">
          <ul>
            <router-link tag="li" :to="item.path" v-for = " (item, index) of list " :key = "index">
              <span>
                <div :class= "item.img" style= "color:#df5e62"></div>
              </span>
              <p>{{ item.name }}</p>
            </router-link>
          </ul>
        </div>
        <!-- 商品分类   结束 -->
        <!-- 商品列表开始 -->
        <Prolist :prolist = 'prolist'/>
        <!-- 商品列表结束 -->
      </div>
    </div>
</template>

<script>
import Prolist from '@/components/Prolist'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
import axios from 'axios'
Vue.use(Swipe, SwipeItem)
export default {
  data () {
    return {
      prolist: [],
      bannerlist: [],
      list: [{
        img: 'iconfont icon-yifu proicon',
        name: '服饰配饰',
        path: '/dress'
      }, {
        img: 'iconfont icon-xie proicon',
        name: '鞋靴箱包',
        path: '/shoes'
      }, {
        img: 'iconfont icon-hufupin proicon',
        name: '美妆护肤',
        path: '/makeup'
      }, {
        img: 'iconfont icon-muyingleimu proicon',
        name: '母婴儿童',
        path: '/baby'
      }, {
        img: 'iconfont icon-tel proicon',
        name: '时尚科技',
        path: '/science'
      }, {
        img: 'iconfont icon-yiyaobaojian proicon',
        name: '个护保健',
        path: '/health'
      }, {
        img: 'iconfont icon-huwai proicon',
        name: '运动户外',
        path: '/sport'
      }, {
        img: 'iconfont icon-nanshi proicon',
        name: '男士专区',
        path: '/man'
      }]
    }
  },
  components: {
    Prolist
  },
  created () {
    axios.all([this.getBannerList(), this.getProlist()])
      .then(axios.spread((bannerData, proData) => {
        // 两个请求现在都执行完成
        // console.log(bannerData)
        // console.log(proData)
        let arr = []
        bannerData.data.map(item => {
          arr.push('/taotao/' + item)
        })
        this.bannerlist = arr
        this.prolist = proData.data
      }))
  },
  methods: {
    getBannerList () {
      return axios.get('/taotao/banner')
    },
    getProlist () {
      return axios.get('/taotao/douban')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';

.headbox {
  width: 2.6rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background-color:#fff;
  @include margin(0.07rem auto)
}

.ipt {
  @include rect(2rem, 0.3rem);
  border: 0;
  margin-left: 0.2rem;
}

.icon-02 {
  @include rect(0.3rem, 0.3rem);
  @include font-size(0.15rem);
  line-height: 0.3rem;
  text-align: center;
  float: right;
  @include margin(0 0.1rem 0 0);
  color: #ccc
}
// .content{

// }
.banner {
  width: 100%;
  height: 1.6rem;
  @include background-color(#eee);
  .mint-swipe {
  width: 100%;
  height: 1.6rem;
    img {
      width: 100%;
    }
  }
}
.pro-type {
  @include rect(100%, 2.2rem);
  border-bottom: 1px solid #ccc;
  ul{
    width: 100%;
    height: 100%;
    padding: 0.1rem 0;
    @include flexbox();
    @include justify-content();
    @include align-items();
    flex-wrap: wrap;
    li{
    width: 0.8rem;
    height: 0.9rem;
    font-size: 0.12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    span{
      display: block;
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 50%;
      border:0.01rem solid #afabab;
    // p{
    //   width: 0.6rem;
    //   height: 0.1rem
    // }
      .proicon {
        @include rect(0.6rem, 0.6rem);
        font-size: 0.4rem;
        text-align: center
      }
    }
  }
  }
}
</style>
